<#compress>

<!DOCTYPE>
<html>
<head>
    <title>小票图片查看</title>
    <style type="text/css">
        body{
            margin: 0;
            font-size: 84%;
            background: #eee;
            color: #333;
            font-family: Verdana, Geneva, sans-serif;
        }
        .out_box {
            width: 70%;
            min-width: 700px;
            margin: 0 auto;
            height: 100%;
        }
        .in_box {
            padding: 1em 2.5em 0;
            height: auto;
        }
        .header {
            padding: 10px 20px 5px;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
            zoom: 1;
        }
        .author_time {
            float: right;
            margin-top: 34px;
            color: #787878;
            font-family: "Courier New", Courier, monospace;
        }
        .title{
            font-size: 1.6em;
            text-align: center;
            margin: 20px 0;
        }
        .sub_title{
            font-size: 1em;
            text-align: center;
            margin: 20px 0;
        }
        .test_list {
            padding: 1em;
            font-size: 1.1em;
            line-height: 1.3;
            overflow: hidden;
            zoom: 1;
        }
        .main_con {
            _height: 580px;
            padding: 0 20px 20px;
        }
        .rot_box {
            width: 512px;
            margin: 0 auto;
        }
        .l {
            float: left;
        }
        .r {
            float: right;
        }
        .fix {
            zoom: 1;
        }
        .f9 {
            font-size: 0.9em;
        }
        .mb10 {
            margin-bottom: 10px;
        }
        .pd10 {
            padding-bottom: 10px;
        }
        a {
            color: #34538b;
            text-decoration: underline;
        }
        a:hover {
            color: #F30;
            text-decoration: underline;
        }


        .rot_box{width:512px; margin:0 auto;}
        .image_box{height:512px; text-align:center;}
        .rot1{padding-top: 260px;-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -ms-filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
        .rot2{padding-top: 260px;-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -ms-filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
        .rot3{padding-top: 260px;-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -ms-filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var param = {
                right: document.getElementById("rotRight"),
                left: document.getElementById("rotLeft"),
                img: document.getElementById("rotImg"),
                rot: 0
            };
            var fun = {
                right: function(){
                    param.rot +=1;
                    param.img.className = "rot"+param.rot;
                    if(param.rot === 3){
                        param.rot = -1;
                    }
                },
                left: function(){
                    param.rot -=1;
                    if(param.rot === -1){
                        param.rot = 3;
                    }
                    param.img.className = "rot"+param.rot;
                }
            };
            param.right.onclick = function(){
                fun.right();
                return false;
            };
            param.left.onclick = function(){
                fun.left();
                return false;
            };
        };
    </script>
</head>

<body>
<div class="out_box">
    <div class="in_box">
        <div class="header">
            <a href="javascript:void(0);">
                <img class="l" src="${ctx}/static/admin/img/znc_logo.png" />
            </a>
            <span class="author_time">小票提交时间：${wxTicket.upload_time!}</span>
        </div>
        <h1 class="title">小票图片查看</h1>
        <h2 class="sub_title">小票号：<#if wxTicket.ticket_no??>${wxTicket.ticket_no}<#else>暂无</#if></h2>
        <div class="main_con">
            <div class="test_list">
                <div class="rot_box">
                    <p class="fix f9 mb10 pd10">
                        <a id="rotLeft" class="l" href="javascript:void(0);">&lt;&lt;向左转</a>
                        <a id="rotRight" class="r" href="javascript:void(0);">向右转&gt;&gt;</a>
                    </p>
                </div>
            </div>
        </div>
        <img id="rotImg"  src="${ctx}/${wxTicket.pricute!}" />
    </div>
</div>
</body>
</html>

</#compress>